<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBackList"
    ></topTitle>
    <div class="mainCon">
      <el-row :gutter="20" class="topBox">
        <el-col :span="18" style="padding-left: 0px">
          <div class="grid-content bg-purple">
            <div class="leftTBox">
              <div class="companyName">
                <span class="companyTit ellipsis">{{
                  projectScore.projectName
                }}</span>
                <span
                  :class="[
                    startStatus,
                    {
                      greenBack: projectScore.status === 'STARTED',
                      StartOver: projectScore.status === 'COMPLETED',
                      startStop: projectScore.status === 'STOPPED',
                      noStart: projectScore.status === 'NOT_STARTED',
                    },
                  ]"
                  >{{ projectScore.statusDesc }}</span
                >
              </div>
              <div class="rating">
                <p>
                  <span class="score">
                    <span>{{
                      projectScore.score == null ? '--' : projectScore.score
                    }}</span
                    >分 / 评级：<span>{{
                      projectScore.gradeLevel
                        ? projectScore.gradeLevel === 'O'
                          ? '其他'
                          : projectScore.gradeLevel
                        : '--'
                    }}</span>
                  </span>
                  <span class="time fS color999">
                    <span>评价更新时间：</span>
                    <span>{{ projectScore.scoreUpdateTime || '--' }}</span>
                  </span>
                </p>
              </div>
            </div>
            <div class="leftBBox">
              <ESreduceTable
                :tableList="negetivePoints"
                scoreType="project"
              ></ESreduceTable>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="padding-right: 0">
          <div class="grid-content bg-purple">
            <div class="rightTBox">
              <p class="fS color666">
                {{ detailData.cityName || '--' }}在建项目排名
              </p>
              <p class="ranking color333">
                <i v-if="isScore" class="iconfont iconpaiming"></i>
                <span>{{ detailData.rank }}</span
                >/<span>{{ detailData.total }}</span>
              </p>
            </div>
          </div>
          <div class="grid-content bg-purple">
            <div class="rightBBox">
              <p class="basicSituation color333">基本情况</p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">建档日期：</span>
                <span class="fS fr color333">{{
                  detailData.projectCreateTime || '-- '
                }}</span>
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">开工日期：</span>
                <span class="fS fr color333">{{
                  detailData.startDate || '-- '
                }}</span>
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">建设周期：</span>
                <span class="fS fr color333"
                  >{{
                    detailData.cycle == null ? '-- ' : detailData.cycle
                  }}天</span
                >
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">实名制总人数：</span>
                <span class="fS fr color333"
                  >{{ detailData.realNameTotal || 0 }}人</span
                >
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">考勤人次：</span>
                <span class="fS fr color333"
                  >{{ detailData.attTotal || 0 }}人次</span
                >
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">保证金总缴存：</span>
                <span class="fS fr color333">{{
                  detailData.depositAccount || '--'
                }}</span>
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">工资专户：</span>
                <span class="fS fr color333" style="color: #5fab2c">{{
                  detailData.salaryAccount || '--'
                }}</span>
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">代发工资总额：</span>
                <span class="fS fr color333"
                  >{{ detailData.salaryTotal || 0 }}万元</span
                >
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import topTitle from '@/components/publicCom/topTitle'
import ESreduceTable from './ESreduceTable'
export default {
  name: 'ESprojectScoreDetail',
  components: {
    topTitle,
    ESreduceTable,
  },
  data() {
    return {
      isScore: true,
      titleText: '项目评价详情',
      startStatus: 'startStatus', //状态样式
      isShowDetail: '',
      detailData: {},
      projectScore: {},
      negetivePoints: [],
      projectId: '',
      projectScoreId: '',
      back: true,
      page: '',
      fromPath: '',
    }
  },
  beforeRouteEnter(to, from, next) {
    if (
      from.path == '/home/enterpriseScore/projectScoreList' ||
      '/home/networkGrid/dataSharingSettings'
    ) {
      next()
    } else {
      next((vm) => {
        // 从其它页面过来默认选中项目评价
        vm.$store.commit(
          'set_active_index',
          '/home/enterpriseScore/projectScoreList'
        )
        vm.$store.state.activeMenu = '/home/enterpriseScore/projectScoreList'
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/enterpriseScore/projectScoreList',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
    }
  },
  created() {
    this.projectId = this.$route.query.projectId
    this.page = this.$route.query.page
    this.projectScoreId = this.$route.query.projectScoreId
    this.getScoreData()
    this.getESScoreData()
  },
  methods: {
    goBackList() {
      if (this.page == 'dataSharingSettings') {
        this.$router.push({
          path: '/home/networkGrid/dataSharingSettings',
          name: 'dataSharingSettings',
        })
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/networkGrid/dataSharingSettings',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push('/home/enterpriseScore/projectScoreList')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/enterpriseScore/projectScoreList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // 项目评分详情
    getScoreData() {
      this.axios({
        method: 'post',
        url: 'api-ps/creditProjScorDetail/expand/findProjectScoreDetail',
        data: {
          projectId: this.projectId,
          projectScoreId: this.projectScoreId,
        },
      })
        .then(async (resp) => {
          if (!resp.data.hasError) {
            this.detailData = resp.data.result
            // this.negetivePoints = this.detailData.indexDimList;
            this.projectScore = this.detailData.projectScore || {}
          } else {
            this.$message({
              type: 'error',
              message: resp.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '数据获取失败',
          })
        })
    },
    // 恩施项目评分扣分详情
    getESScoreData() {
      this.axios({
        method: 'post',
        url: 'api-ps/creditProjScorDetail/expand/findPCreditIndexByIdES',
        data: {
          projectId: this.projectId,
          projectScoreId: this.projectScoreId,
          appType: '20',
        },
      })
        .then(async (resp) => {
          if (!resp.data.hasError) {
            let results = resp.data.result
            this.negetivePoints = results
          } else {
            this.$message({
              type: 'error',
              message: resp.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '数据获取失败',
          })
        })
    },
  },
}
</script>

<style scoped lang="less">
/* .mainCon {
    top: 213px;
} */
.mainCon {
  background: #f5f7fa;
  height: 100%;
  padding: 0;
  /* 开工状态 */
  .startStatus {
    padding: 2px 8px;
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
    vertical-align: top;
    display: inline-block;
    margin-top: 8px;
  }
  .greenBack {
    background: #009588;
  }
  .StartOver {
    background: #657282;
  }
  .noStart {
    background: #ffc100;
  }
  .startStop {
    background: #d9544f;
  }
  .topBox {
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* padding:25px;
      background: #fff; */
    /* 左边盒子样式 */
    .leftTBox {
      padding: 20px 25px;
      background: #fff;
      height: 122px;
      .companyName {
        color: #333333;
        font-size: 24px;
        .companyTit {
          display: inline-block;
          max-width: 600px;
        }
      }
      .rating {
        margin-top: 12px;
        .score {
          font-size: 24px;
          color: #333333;
        }
        .time {
          margin-left: 24px;
        }
      }
    }
    .leftBBox {
      background: #fff;
      padding: 24px 24px;
      margin-top: 10px;
      /deep/.el-divider__text.is-left {
        left: 0;
      }
      /* /deep/.el-divider--horizontal {
        margin:0 0 ;
      } */
      /deep/.el-divider__text {
        padding: 0;
        padding-right: 12px;
        font-size: 16px;
        color: #333333;
      }
      .deduction {
        margin-top: 12px;
        > div {
          padding-left: 96px;
        }
        .dedTitle {
          margin-bottom: 6px;
        }
        .funBut {
          color: #009588;
          border-color: #009588;
          background: #fff;
          width: 96px;
          margin-left: 60px;
        }
        .dedCon {
          display: inline-block;
          margin-top: 5px;
        }
        .rankDetail {
          margin-top: 12px;
          background: #f5f7fa;
          padding: 22px 24px;
          .conTitle {
            font-size: 16px;
            margin-bottom: 20px;
          }
          .way {
            margin-top: 8px;
            /deep/.howRepair {
              /* font-size: 14px;
                  color: #666666; */
              /* p { */
              /* font-size: 14px;
                  color: #666666; */
              /* } */
              span {
                font-size: 14px !important;
                color: #666666 !important;
                font-family: 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif' !important;
              }
            }
          }
          .pointsLevel {
            color: #e02020;
          }
          .type {
            font-size: 12px;
            border: 1px solid #009588;
            padding: 0 2px;
            color: #009588;
            border-radius: 2px;
          }
        }
      }
      .noDeduction {
        text-align: center;
        margin-top: 48px;
        img {
          width: 160px;
          margin-bottom: 15px;
        }
      }
    }
    .explainBox {
      padding: 24px;
      background: #fff;
      margin-top: 10px;
      font-size: 14px;
      color: #999999;
    }
    .rightTBox {
      height: 122px;
      background: #fff;
      text-align: center;
      padding-top: 28px;
      margin-bottom: 10px;
      .ranking {
        font-size: 28px;
        margin-top: 10px;
      }
    }
    .rightBBox {
      background: #fff;
      padding: 16px 27px;
      /* margin-top: 10px; */
      .basicSituation {
        font-size: 16px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #d5dee7;
      }
    }
  }
  .mrT12 {
    margin-top: 12px;
  }
  .labelWidth {
    margin-bottom: 8px;
    font-size: 14px;
    color: #717171;
  }
  .fS {
    font-size: 14px;
  }
  .w80 {
    width: 80%;
  }
  .repair {
    font-size: 14px;
    color: #3a3a3a;
    font-weight: 550;
    margin-bottom: 8px;
  }
}
.iconpaiming {
  font-size: 34px;
  background-image: linear-gradient(to bottom, #fd9d00 0%, #fa6400 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
